<template>
<q-page padding class="column items-stretch justify-content hide-scrollbar">
    <div v-if="!isSearch" style="padding-top: 50px" class="column col-grow">
        <div v-if="isLoad" class="row col-grow flex-center">
            <div class="text-gray column items-center">
                <q-spinner-hourglass color="primary" size="4em" />
                <div>
                    数据加载中
                    <q-spinner-dots color="grey" size="2.5em" />
                </div>
            </div>
        </div>
        <ProjectList ref="project-list" :projectList="projectList" :isLoad="isLoad" :noMoreProject="noMoreProject" @refresh-project="handleRefreshProject"></ProjectList>

        <div v-if="!isLoad && projectList.length == 0" class="row col-grow flex-center">
            <div class="text-gray">
                <img :style="$q.platform.is.mobile ? 'height:200px;width:250px' : ''" src="icons/emptyproject.png" alt="" srcset="" />
            </div>
        </div>
    </div>

    <div v-else style="padding-top: 50px" class="column col-grow">
        <div v-if="isLoad" class="row col-grow flex-center">
            <div class="text-gray column items-center">
                <q-spinner-hourglass color="primary" size="4em" />
                <div>
                    数据加载中
                    <q-spinner-dots color="grey" size="2.5em" />
                </div>
            </div>
        </div>
        <ProjectList ref="searched-project-list" :projectList="searchedProjectList" :isLoad="isLoad" :noMoreProject="noMoreProject" @refresh-project="handleRefreshSearchedProject"></ProjectList>

        <div v-if="
          !isLoad &&
          searchedProjectList.length == 0 &&
          searchProjectInput.length > 0
        " class="row col-grow flex-center">
            <div class="text-gray">
                <img :style="$q.platform.is.mobile ? 'height:200px;width:250px' : ''" src="icons/emptyproject.png" alt="" srcset="" />
            </div>
        </div>
    </div>

    <create-project :isCreateDialog="isCreateDialog" :user="user" @update="handleCreateDialog"></create-project>


    <q-page-sticky  expand position="top" class="bg-white column items-center justify-center ">
        <q-toolbar class="" style="width: 100%">
            <q-tabs v-if="!isSearch" v-model="tab" style="width: 80%" class="text-grey" active-color="primary" indicator-color="primary" @input="handleTabChanged" :align="$q.platform.is.desktop ? 'left' : 'center'">
                <q-tab style="width: 200px" name="processing" label="进行中" />
                <q-tab style="width: 200px" name="toStart" label="待开始" />
                <q-tab style="width: 200px" name="completed" label="已完成" />
            </q-tabs>
            <q-input style="width: 100%" ref="searchInput" v-if="isSearch" debounce="500" v-model="searchProjectInput" @input="searchProject" placeholder="搜索项目" dense />

            <q-space></q-space>

            <q-btn flat round dense :icon="isSearch ? 'close' : 'search'" @click="handleSearchProject" />
        </q-toolbar>

        <q-separator style="width: 98%" />
    </q-page-sticky>
    <q-page-sticky v-if="$User.isAdmin()" position="bottom-right" :offset="fabPos">
        <q-btn dense rounded class="shadow-6 q-px-md translucence" color="white" @click="handleCreateDialog" :disable="draggingFab" stack text-color="primary">
            <q-icon size="15px" name="add"></q-icon>
            <div class="text-caption">创建项目</div>
        </q-btn>
    </q-page-sticky>
</q-page>
</template>

<script>
import {
    getProjectList,
    searchProjectList
} from "assets/api/project";
import {
    date
} from "quasar";
import {
    searchMD5
} from "src/assets/api/work";

export default {
    name: "ProjectIndexPage",
    components: {
        ProjectList: () => import("components/ProjectList"),
        CreateProject:()=>import('components/CreateProject.vue')
    },
    props:{
      user:{
        type:Object
      }
    },

    data() {
        return {

            tab: "processing",
            projectList: [],
            searchedProjectList: [],
            isLoad: true,
            isEmpty: true,
            noMoreProject: false,
            isRefresh: false,
            isSearch: false,
            searchProjectInput: "",
            pageNum: 1,
            pageSize: 10,

            fabPos: [50, 50],
            draggingFab: false,
            isCreateDialog: false,
            isAdmin: false,
            createProject: {
                name: "",
                type: "",
                resolution: {
                    name: "HD(1080P)",
                    val: "HD",
                },
                fps: 25,
                lastTime: {
                    from: "",
                    to: "",
                },
                rank:           {
                    name: "重要紧急",
                    val: 0,
                },
                aspectRatio: "16:9",
                memerList: [],
            },
            resolutions: [{
                    name: "UHD(4k)",
                    val: "UHD",
                },
                {
                    name: "HD(1080P)",
                    val: "HD",
                },
            ],
            ranksOptions:[
              {
                    name: "重要紧急",
                    val: 0,
                },
                {
                    name: "重要不紧急",
                    val: 1,
                },
                {
                    name: "紧急不重要",
                    val: 2,
                },
                {
                    name: "不紧急不重要",
                    val: 3,
                },
            ],
            isMemSeleteDialog: false,
            selectedmemebers:[
            ],
            projectMembers:[]



        };
    },
    mounted() {
        document.title = "一方映画--首页";
        this.loadProjectList();

    },

    methods: {

      handleCreateDialog(type) {
            if(type=='reload'){
                this.loadProjectList();
            }
            this.isCreateDialog = !this.isCreateDialog;

            // console.log(this.$date);
            // this.createProject.from = this.$date.now();
        },

        moveFab(ev) {
            this.draggingFab = ev.isFirst !== true && ev.isFinal !== true;
            if (this.fabPos[0] - ev.delta.x <= 0) {
                var x = 0;
            } else {
                var x = this.fabPos[0] - ev.delta.x;
            }
            if (this.fabPos[1] - ev.delta.y <= 0) {
                var y = 0;
            } else {
                var y = this.fabPos[1] - ev.delta.y;
            }

            this.fabPos = [x, y];
        },


        handleRefreshProject(v) {
            this.pageNum += 1;
            console.log("refresh", this.pageNum);

            if (this.tab == "processing") {
                var status = 0;
            } else if (this.tab == "toStart") {
                var status = 2;
            } else if (this.tab == "completed") {
                var status = 1;
            }
            let reqData = {
                status: status,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            };

            getProjectList(reqData).then((res) => {
                let data = res.data.data;
                if (data.length > 0) {
                    this.isEmpty = false;
                    this.formatProjectData(data, this.projectList);
                    this.isRefresh = true;
                } else {
                    this.noMoreProject = true;
                    this.$refs["project-list"].$children[0].stop();
                }
            });
        },
        handleTabChanged(name) {
            this.projectList = [];
            this.noMoreProject = false;

            this.pageNum = 1;
            this.pageSize = 10;
            this.isLoad = true;

            this.loadProjectList();
        },
        formatProjectData(data, projectList) {
            data.forEach((item) => {
                let curtime = new Date().getTime();
                let stime = parseInt(item.stime);
                let etime = parseInt(item.etime);
                if (item.rank == 0) {
                    item.color = "pink-6";
                } else if (item.rank == 1) {
                    item.color = "teal-6";
                } else if (item.rank == 2) {
                    item.color = "yellow-8";
                } else if (item.rank == 3) {
                    item.color = "blue-6";
                }
                if (stime > curtime) {
                    item.progress = 0;
                } else if (etime < curtime) {
                    item.progress = 100;
                } else {
                    item.progress = parseFloat(
                        (((curtime - stime) / (etime - stime)) * 100).toFixed(1)
                    );
                }
                item.stime = date.formatDate(stime, "YYYY/MM/DD");
                item.etime = date.formatDate(etime, "YYYY/MM/DD");

                projectList.push(item);
            });
        },

        loadProjectList() {
            this.projectList = [];
            if (this.tab == "processing") {
                var status = 0;
            } else if (this.tab == "toStart") {
                var status = 2;
            } else if (this.tab == "completed") {
                var status = 1;
            }
            let reqData = {
                status: status,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            };
            getProjectList(reqData).then((res) => {
                let data = res.data.data;
                this.isLoad = false;
                if (data.length == 0) {
                    this.noMoreProject = true;
                    this.isEmpty = true;
                } else if (data.length > 0) {
                    this.isEmpty = false;
                    this.formatProjectData(data, this.projectList);
                }
            });
        },

        handleSearchProject() {
            this.isSearch = !this.isSearch;

            if (this.isSearch == "false") {
                this.searchProjectInput = "";
                this.searchProjectList = [];
            } else {
                setTimeout(() => {
                    console.log(this.$refs.searchInpuT);
                    this.$refs.searchInput.focus();
                }, 400);
            }
        },
        searchProject(v) {
            this.isLoad = true;
            this.pageNum = 1;
            let reqData = {
                name: v,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            };
            if (v.length > 0) {
                searchProjectList(reqData).then((res) => {
                    let data = res.data.data;
                    console.log(data);
                    this.isLoad = false;
                    if (data.length == 0) {
                        this.noMoreProject = true;
                        this.isEmpty = true;
                    } else if (data.length > 0) {
                        this.isEmpty = false;
                        this.formatProjectData(data, this.searchedProjectList);
                    }
                });
            }
        },
        handleRefreshSearchedProject(v) {
            this.pageNum += 1;
            console.log("refresh", this.pageNum);

            let reqData = {
                name: v,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            };

            searchProjectList(reqData).then((res) => {
                let data = res.data.data;
                if (data.length > 0) {
                    this.isEmpty = false;
                    this.formatProjectData(data, this.searchedProjectList);
                } else {
                    this.noMoreProject = true;
                    this.$refs["searched-project-list"].$children[0].stop();
                }
            });
        },
    },
};
</script>
